<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-button
        icon="el-icon-link"
        type="primary"
        size="mini"
        style="margin-bottom: 10px"
        @click="openExecute"
        >执 行</el-button
      >

      <el-button
        icon="el-icon-refresh"
   
        size="mini"
        style="margin-bottom: 10px"
        @click="reload"
        >重 置</el-button
      >
    </el-form>

    <el-table
      v-loading="loading"
      :data="pursList"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- 添加序号列 -->
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
        index-method="indexMethod"
      />
      <el-table-column label="计划编码" align="center" prop="planCode" />
      <el-table-column label="计划名称" align="center" prop="planName">
        <template slot-scope="scope">
          <div
            style="
              color: black;
              font-weight: bold;
              font-family: '仿宋';
              font-size: 15px;
            "
            class="planName"
          >
            {{ scope.row.planName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="业务类型" align="center" prop="busiType">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.business_type"
            :value="scope.row.busiType"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="creater" />
      <el-table-column label="创建部门" align="center" prop="deptName" />
      <el-table-column label="创建时间" align="center" prop="creatTime">
        <template slot-scope="scope">
          {{ myFormatTime(scope.row.creatTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="statu">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.purs_statu" :value="scope.row.status" />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="提示"
      :visible.sync="checkdialogVisible"
      width="62%"
      :before-close="handleClose"
    >
      <div class="check-box">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-date"></i> 采购信息</span>
            <div class="budGetInfo-box">
              <el-table :data="budgetList" border>
                <el-table-column label="预算编号" align="center" prop="bgId" />
                <el-table-column
                  label="部门名称"
                  align="center"
                  prop="createPost"
                />
                <el-table-column
                  label="预算名称"
                  align="center"
                  prop="bgName"
                  width="170px"
                />

                <el-table-column
                  label="总金额"
                  align="center"
                  prop="totalAmount"
                />

                <el-table-column
                  label="已使用金额"
                  align="center"
                  prop="useMoney"
                />
                <el-table-column
                  label="剩余金额"
                  align="center"
                  prop="surpMoney"
                />
              </el-table>
            </div>
            <div style="margin-top: 30px">
              <el-table :data="planInfoList" style="width: 100%" border>
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="税率">
                        <span>{{ props.row.taxRate + "%" }}</span>
                      </el-form-item>
                      <el-form-item label="预算总价">
                        <span>{{ props.row.bdgTotlePrice + "元" }}</span>
                      </el-form-item>
                      <el-form-item label="交付时间">
                        <span>{{ props.row.delvTime }}</span>
                      </el-form-item>
                      <el-form-item label="需求说明">
                        <span>{{ props.row.prodExplain }}</span>
                      </el-form-item>
                      <el-form-item label="采购人">
                        <span>{{ props.row.purchaser }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="预算编号"
                  align="center"
                  prop="bgId"
                  width="120"
                />
                <el-table-column
                  label="产品编号"
                  align="center"
                  prop="prodId"
                  width="180"
                />
                <el-table-column
                  label="产品名称"
                  align="center"
                  prop="prodName"
                  width="120"
                />
                <el-table-column
                  label="规格"
                  align="center"
                  prop="size"
                  width="120"
                />
                <el-table-column
                  label="预算单价"
                  align="center"
                  prop="bdgSinglePrice"
                  width="120"
                />
                <el-table-column
                  label="需求数量"
                  align="center"
                  prop="reqNumber"
                />
              </el-table>
            </div>
            <div class="remark-box" v-show="openStatu < 3">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="审批记录">
            <div>
              <div style="width: 700px; margin: 0 auto">
                <el-steps :active="recordStatu">
                  <el-step title="待提交"></el-step>
                  <el-step title="待审批"></el-step>
                  <el-step title="已生效"></el-step>
                </el-steps>
              </div>
              <el-table :data="recordsList" border style="margin-top: 20px">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form
                      label-position="left"
                      inline
                      class="demo-table-expand"
                    >
                      <el-form-item label="审批意见">
                        <span>{{ props.row.appRemark }}</span>
                        <p v-html="props.row.appRemark"></p>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  label="流程节点名称"
                  align="center"
                  prop="appName"
                />
                <el-table-column
                  label="处理人"
                  align="center"
                  prop="createName"
                />
                <el-table-column
                  label="所属部门"
                  align="center"
                  prop="deptName"
                />
                <el-table-column
                  label="处理时间"
                  align="center"
                  prop="createTime"
                />
                <el-table-column label="状态" align="center" prop="appStatu">
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.records_statu"
                      :value="scope.row.appStatu"
                    />
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="recordTotal > 0"
                :total="recordTotal"
                :page.sync="queryRecordParams.pageNum"
                :limit.sync="queryRecordParams.pageSize"
                @pagination="getRecordsList"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkdialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="选择采购方式"
      :visible.sync="executeDialogVisible"
      width="50%"
      :before-close="executeHandleClose"
    >
      <div>
        <el-radio-group v-model="radio">
          <el-radio :label="1" style="font-family: '楷体'; font-weight: bold"
            >公开招标</el-radio
          >
          <el-radio :label="2" style="font-family: '楷体'; font-weight: bold"
            >邀请招标</el-radio
          >
          <el-radio :label="3" style="font-family: '楷体'; font-weight: bold"
            >询价</el-radio
          >
          <el-radio :label="4" style="font-family: '楷体'; font-weight: bold"
            >委托</el-radio
          >
          <el-radio :label="5" style="font-family: '楷体'; font-weight: bold"
            >竞争性谈判</el-radio
          >
          <el-radio :label="6" style="font-family: '楷体'; font-weight: bold"
            >单一来源</el-radio
          >
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="execute">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  
  <script>
import utils from "@/api/utils/utils.js";
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { updatePurs, getPlanDetails, getPlanFinish } from "@/api/purs/purs";
import { listBind, getBind, addBind } from "@/api/purs/bind";

import { addRecords, listRecords, updateRecords } from "@/api/purs/records";
export default {
  name: "Purs",
  dicts: ["business_type", "purs_statu", "records_statu", "pur_methods"],
  components: { Editor, Toolbar },
  data() {
    return {
      radio: 1,
      openStatu: 0,
      recordTotal: 0,
      recordStatu: 0,
      executeDialogVisible: false,
      editor: null,
      html: "<p></p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      budgetList: [],
      planInfoList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采购计划.审批通过后生成招标项目表格数据
      pursList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        planName: null,
        busiType: null,
        planType: null,
        status: 1,
      },
      queryRecordParams: {
        pageNum: 1,
        pageSize: 10,
        planCode: null,
        appName: null,
        createName: null,
        deptName: null,
        appRemark: null,
        appType: null,
        appStatu: null,
      },

      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      activeName: "first",
      checkdialogVisible: false,
      records: {},
      prodPlan: {},
      recordsList: [],
      recordFlag: false,
      executeList: [],
      executeObj: {},
      bindObj: {},
    };
  },
  created() {},
  mounted() {
    this.queryParams.status = 3;
    this.getList();
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    reload() {
      this.queryParams.status = 3;
      this.getList();
    },

    executeHandleClose(done) {
      this.executeDialogVisible = false;
    },
    openExecute() {
      if (this.executeList.length > 0) {
        if (this.executeList.length > 1) {
          this.$refs.multipleTable.clearSelection();
          this.executeList = [];
          this.$modal.msgError("只能选择一条数据执行");
        } else {
          this.executeDialogVisible = true;
        }
      } else {
        this.$modal.msgError("请选择要执行的数据");
      }
    },
    execute() {
      this.executeDialogVisible = true;
      this.executeObj = this.executeList[0];
      this.bindObj.bindCode = this.executeObj.planCode;
      this.bindObj.bindMethod = this.radio;
      this.bindObj.bindName = this.executeObj.planName;
      this.bindObj.busiType = this.executeObj.busiType;
      //项目初始状态 -> 立项
      this.bindObj.status = 1;
      this.executeObj.prodMethod = this.radio;
      updatePurs(this.executeObj).then((res) => {
        console.log("res:" + JSON.stringify(res));
        if (res.msg == "操作成功") {
          addBind(this.bindObj).then();
          this.$modal.msgSuccess("执行成功");
          this.executeDialogVisible = false;

          this.getList();
        }
      });
    },

    /** 查询审批计划列表 */
    getRecordsList() {
      listRecords(this.queryRecordParams).then((response) => {
        this.recordsList = response.rows;
        this.recordTotal = response.total;
        this.recordStatu = 0;
        if (this.recordFlag) {
          this.recordStatu = 1;
        } else {
          response.rows.forEach((item) => {
            if (item.appStatu > this.recordStatu) {
              this.recordStatu = parseInt(item.appStatu);
            }
          });
        }
      });
    },
    recordsDetails(row) {
      this.openStatu = 3;
      this.queryRecordParams.planCode = row.planCode;
      this.getRecordsList();
      getPlanDetails(row.planCode).then((res) => {
        this.budgetList = res.data.purProdBudget;
        this.planInfoList = [];
        res.data.purProdBudget.forEach((res) => {
          res.purProdInfos.forEach((item) => {
            this.planInfoList.push(item);
          });
        });
      });
      this.checkdialogVisible = true;
    },

    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },

    //审批按钮
    checkPlan(row) {
      this.openStatu = 2;
      this.queryRecordParams.planCode = row.planCode;
      this.getRecordsList();
      this.records.planCode = row.planCode;
      this.prodPlan.planCode = row.planCode;
      getPlanDetails(row.planCode).then((res) => {
        this.budgetList = res.data.purProdBudget;
        this.planInfoList = [];
        res.data.purProdBudget.forEach((res) => {
          res.purProdInfos.forEach((item) => {
            this.planInfoList.push(item);
          });
        });
      });

      this.checkdialogVisible = true;
    },

    handleClose(done) {
      this.checkdialogVisible = false;
    },

    myFormatTime(time) {
      return utils.myformatter(new Date(time));
    },

    indexMethod(index) {
      // 根据需要自定义序号生成方式，这里只是简单返回索引+1
      return index + 1;
    },

    /** 查询采购计划.审批通过后生成招标项目列表 */
    getList() {
      this.loading = true;
      getPlanFinish().then((response) => {
        this.pursList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.executeList = selection;
    },
  },
};
</script>
  <style src="@wangeditor/editor/dist/css/style.css"></style>
  <style scoped>
.planName:hover {
  text-decoration: underline;
  cursor: pointer;
}
.check-box {
  width: 850px;
  margin: 0 auto;
  overflow: auto;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 20px;
  width: 50%;
}

.budGetInfo-box {
  width: 820px;
  box-sizing: border-box;
  overflow: auto;
}
.remark-box {
  width: 820px;
  height: 200px;
  border: 1px solid black;
  margin: 50px auto;
  overflow: auto;
}
</style>
  